<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache,no-store,must-revalidate">
    <meta http-equiv="Cache" content="no-cache">
    <title>时间数据</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css" />
    <link rel="stylesheet" href="../../admin/css/other/department.css" />
   
  </head>
  <body class="pear-container">

    <div class="layui-row layui-col-space10">
      <div class="layui-col-md12">
        <div class="layui-collapse">
          <div class="layui-colla-item">
            <h2 class="layui-colla-title">条件检索</h2>
            <div class="layui-colla-content" id="searchContentDiv">
              <div class="layui-card-body" style="background-color: #FFF;">
                <form class="layui-form" action="" lay-filter="form-filter">

                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                      <div class="layui-form-item">
                        <label class="layui-form-label">账号</label>
                        <div class="layui-input-block">
                          <input type="text" name="userCode" autocomplete="off" placeholder="输入账号"
                            class="layui-input">
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md4">
                      <div class="layui-form-item">
                        <label class="layui-form-label">设备号</label>
                        <div class="layui-input-block">
                          <input type="text" name="machineNo" autocomplete="off" placeholder="设备号"
                            class="layui-input">
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md4">
                      
                    </div>
                  </div>

                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                      <div class="layui-form-item">
                        <label class="layui-form-label">记录类型</label>
                        <input type="checkbox" name="" value="op作业" title="op作业">
                        <input type="checkbox" name="" value="保全作业" title="保全作业">
                        <input type="checkbox" name="" value="异常记录" title="异常记录">
                      </div>
                    </div>
                    <div class="layui-col-md6">
                      
                    </div>
                  </div>

                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md6">
                      <div class="layui-form-item">
                        <label class="layui-form-label">日期范围</label>
                        <div class="layui-input-block">
                          <input id="searchDateRange" type="text" name="searchDateRange" autocomplete="off" placeholder="选择日期范围" class="layui-input">
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                      <div class="layui-form-item">
                        <label class="layui-form-label">LotNo</label>
                        <div class="layui-input-block">
                          <input type="text" name="LotNo" autocomplete="off" placeholder="请输入LotNo" class="layui-input"/>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md4">
                      <div class="layui-form-item">
                        <label class="layui-form-label">AQRNo</label>
                        <div class="layui-input-block">
                          <input type="text" name="AQRNo" autocomplete="off" placeholder="请输入AQRNo" class="layui-input"/>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md4">
                    </div>
                  </div>

                  <div class="layui-row layui-col-space10">
                    <div class="layui-col-md4">
                      <div class="layui-form-item">
                        <label class="layui-form-label">其他关键字</label>
                        <div class="layui-input-block">
                          <input type="text" name="otherKeywords" autocomplete="off" placeholder="请输入关键字" class="layui-input"/>
                        </div>
                      </div>
                    </div>
                    <div class="layui-col-md4"></div>
                    <div class="layui-col-md4">
                      <div style="position: relative;height:40px">
                        <div class="button-container">
                          <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                          lay-filter="conditionSearch">
                            <i class="layui-icon layui-icon-ok"></i>
                            提交条件
                          </button>
                          <button type="reset" class="pear-btn pear-btn-sm" id="resetConditionSearch">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置条件
                          </button>
                        </div>
                      </div>
                      
                      
                    </div>
                    
                  </div>

                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="layui-row layui-col-space10">
      <div class="layui-col-md12">
        <div class="layui-card">
          <div class="layui-card-body">
            <table id="record-table" lay-filter="record-table"></table>
          </div>
        </div>
      </div>
    </div>

    <script type="text/html" id="my-row-toolbar">
      <button class="pear-btn pear-btn-default pear-btn-sm" lay-event="viewdata">
        <i class="icon pear-icon pear-icon-browse"></i>
      </button>
      <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove" >
        <i class="layui-icon layui-icon-delete"></i>
      </button>
    </script>


    <script src="../../component/layui/layui.js"></script>
    <script src="../../component/pear/pear.js"></script>
    <script src="../../lay-ext/dayjs.min.js"></script>

    <script type="text/javascript">
      // 加载自定义模块,检查浏览器和token
      layui.extend({
        myheader: "{/}/lay-ext/myheader",
      });
      layui.use(
        ["table", "form", "jquery", "myheader", "popup", "layer","laydate"],
        function () {
          let table = layui.table;
          let form = layui.form;
          let $ = layui.jquery;
          let myheader = layui.myheader;
          let popup = layui.popup;
          let layer = layui.layer;
          let laydate = layui.laydate;

          // 定义全局 ajax的请求头
          myheader.ajaxGlobal(myheader.checkToken().tokenValue);

          // 定义常量
          const baseUrl = myheader.baseUrl();
          const MODULE_PATH = "operate/";
          const mypage = {};

          laydate.render({
            elem: '#searchDateRange'
            ,range:'~'
          })

          // 列参数
          let recordCols = [
            [
              { type: "numbers" },
              { title: "设备号", templet:function(d){
                return d.record.machineNo
              } },
              { title: "记录类型",templet:function(d){
                return d.record.recordType
              } },
              { title: "记录名称",minWidth:100,templet:function(d){
                return d.record.recordName
              }},
              { title: "记录结果",minWidth:100,templet:function(d){
                return d.record.recordResult
              }},
              // { title: "设备部位", field: "recordPart" ,minWidth:100},
              // { title: "选择列", field: "recordSelectedColNo" ,minWidth:100},
              // { title: "异常处理", field: "abnormalHandler" ,minWidth:100},
              { title: "记录开始时间", 
                field: "recordTimeBeginDT" , 
                templet:function(d){
                  if(d.record.recordTimeBeginDT ==null || d.record.recordTimeBeginDT==0 || d.record.recordTimeBeginDT==''){
                    return ''
                  }
                  return  dayjs(d.record.recordTimeBeginDT).format('YYYY-MM-DD HH:mm:ss')
                }
              },
              { 
                title: "记录结束时间", 
                field: "recordTimeEndDT", 
                templet:function(d){
                  if(d.record.recordTimeEndDT ==null || d.record.recordTimeEndDT==0 || d.record.recordTimeEndDT==''){
                    return ''
                  }
                  return  dayjs(d.record.recordTimeEndDT).format('YYYY-MM-DD HH:mm:ss')
                }
              },
              { 
                title: "lotno信息", 
                field: "recordLotInfo" ,
                minWidth:100,
                style:'font-size:8px; line-height: 20px;padding-top:1px;padding-bottom:1px;word-wrap:break-word;word-break:break-all;',
                templet:function(d){
                  if(d.record.recordLotInfo==null || d.record.recordLotInfo==0 || d.record.recordLotInfo==''){
                    return ''
                  }
                  return d.record.recordLotInfo+'<br>备注:'+d.record.recordRemark
                }
              },
              { 
                title: "AQR信息", 
                field: "recordAQRInfo" ,
                minWidth:100, 
                templet:function(d){
                  if(d.record.recordAQRInfo==null || d.record.recordAQRInfo==0 || d.record.recordAQRInfo==''){
                    return ''
                  }
                  return d.record.recordAQRInfo
                }
              },
              // { title: "备注", field: "recordRemark" ,minWidth:100},
              // { title: "确认", field: "recordVerify" ,minWidth:100},
              // { title: "QR码类型", field: "qrType" , 
              //   templet:function(d){
              //     if(d.qrType===null || d.qrType===""){
              //       return "<span style='color:#FF3300'>不使用</span>"
              //     } else if (d.qrType==="textstr") {
              //       return "<span style='color:#D2691E'>手输</span>"
              //     }
                  
              //     return d.qrType;
              //   }
              // },
              { title: "操作", toolbar: "#my-row-toolbar", align: "center" ,minWidth:'110',fixed:'right'},
            ],
          ];

          // 渲染表格
          const tableIdx = table.render({
            elem: "#record-table",
            // 请求
            url: baseUrl + "/record/findAll",
            cols: recordCols,

            response: {
              // 重新设定返回的数据格式
              statusCode: 200, //默认返回 code:0 为返回成功,改成200
              countName: "total", //默认数组总量字段是count,改成total
            },
            // 样式
            skin: "line",
            lineStyle:"height:auto",
            // lineStyle: 'height: 95px;' ,
            //分页
            page: true, // 分页
            // 工具
            // 头部左侧工具栏使用模板
            toolbar: "#my-toolbar",
            // 头部右侧工具栏
            defaultToolbar: [
              {
                title: "刷新",
                layEvent: "refresh",
                icon: "layui-icon-refresh",
              },
              // "filter",
              // "exports",
              // "print",
            ],
            // 单元格编辑的触发方式
            // editTrigger:'dblclick',
            // 渲染完以后的回调
            done:function(){
              $(".layui-table").css("width", "100%");
              $("th[data-field='bar']").css("border-right", "none");
              
              // layer.tips('双击可编辑','.laytable-cell-1-0-2',{tips:1})
              
              // 解决固定列高度的bug
              $(".layui-table-main tr").each(function (index, val) {
                $(".layui-table-fixed").each(function () {
                  $($(this).find(".layui-table-body tbody tr")[index]).height($(val).height());
                });
              });
              $(".layui-table-header tr").each(function (index, val) {
                $(".layui-table-fixed").each(function () {
                  $($(this).find(".layui-table-header thead tr")[index]).height($(val).height());
                });
              });

            }
          });

          // 工具栏
          table.on("toolbar(record-table)", function (obj) {
            const layEvent = obj.event;
            if (layEvent === "refresh") {
              table.reloadData("record-table", {
                scrollPos: "fixed", // 保持滚动条位置不变 - v2.7.3 新增
              });
            } else if(layEvent==='addMaintsItem') {
              mypage.addMaintsItem()
            } else if (layEvent==='searchKeyword'){
              mypage.searchKeyword()
            } else if(layEvent==='clearSearch'){
              mypage.clearSearch()
            }
          });

          // 行 事件
          table.on("tool(record-table)", function (obj) {
            let layEvent = obj.event; // 当前事件

            if (layEvent === "setEnable") {       // 改变行的enable值  
              mypage.setEnable(obj);
            } else if (layEvent === "remove") {    // 删除行 
              mypage.delLine(obj);
            } else if (layEvent === "edit") {     // 编辑行
              mypage.edit(obj);
            } else if(layEvent==="viewdata"){
              mypage.viewdata(obj);
            }
          });

          // 单元格编辑事件
          table.on("edit(record-table)",function(obj){
            // mypage.editCell(obj)
          })

          // 定义个ajax方法的默认设置
          $.ajaxSetup({
            headers: {
              satoken: layui.sessionData("mytoken").tokenValue,
            },
            cache:false,
            error: function () {
              layer.msg("服务器异常");
            },
          })

          // 查看行详细数据
          mypage.viewdata=function(obj){
            layui.sessionData('fu2zi',{
              key:'fuData',
              value:obj.data
            })
            layer.open({
              type: 2,
              title: "查看数据详细",
              shade: 0.4,
              area: ["70%", "100%"],
              content: MODULE_PATH + "timerecord-viewdata.html",
             
            });

          }

          // 删除行 函数
          mypage.delLine = function (obj) {
            let data = obj.data;
            layer.confirm("确定删除吗?", function (layerIdx) {
              $.ajax(baseUrl + "/record/delRecord", {
                type: "post",
                data: {
                  recordID: data.record.recordID,
                },
                success: function (res) {
                  if(res.code==200){
                    popup.success("设定已保存")
                    }
                  else {
                    popup.failure(res.msg+"<br>无权限")
                  }

                },
                complete: function () {
                  table.reloadData('record-table',{
                    scrollPos: 'fixed'  // 保持滚动条位置不变 - v2.7.3 新增
                  })
                  layer.close(layerIdx); //关闭确认框
                },
              });
            });
          };
          
          form.on('submit(conditionSearch)',function(data){
            let checkboxArr=[]
            $('input[type=checkbox]:checked').each(function(){
              checkboxArr.push($(this).val());
            })
            data.field.recordType=checkboxArr.join(';')

            $('#searchContentDiv').removeClass('layui-show')
            table.reloadData('record-table',{
              where:data.field,
              page:{
                curr:1
              }
            })
            return false;
          })         
          $("#resetConditionSearch").click(function(){
            table.reloadData('record-table',{
              where: null,
              page:{
                curr:1
              }
            })
          })
          
        }
      );
    </script>
  </body>
</html>
